<template>
  <div class="index-menu-list lg:flex flex-wrap gap-3">
    <div class="flex-1 flex items-center flex-wrap gap-3">
      <template v-for="(item, key) in menus">
        <div v-if="$route.name === item.name || $route.name === `lang-${item.name}`"
          :key="key"
          class="menu-item actived border bg-purple-1300 border-purple-1300 py-1.5 px-3 flex items-center group">
          <div class="w-4 h-4 -mt-0.5">
            <svg-icon className="block text-base flex-shrink-0"
              :iconName='item.icon'></svg-icon>
          </div>
          <span class="text-sm text-white ml-1">{{$t(item.label)}}</span>
        </div>
        <template v-else>
          <common-link :path="item.path"
            v-if="!item.isCommingSoon"
            :key="key"
            class="border border-gray-1600 hover:border-purple-1300 py-1.5 px-3 flex items-center group">
            <div class="w-4 h-4 -mt-0.5">
              <svg-icon className="block text-base flex-shrink-0"
                :iconName='item.icon'></svg-icon>
            </div>
            <span class="text-sm text-gray-1000 group-hover:text-purple-1300 ml-1">{{$t(item.label)}}</span>
          </common-link>
          <el-tooltip class="item"
            v-else
            effect="dark"
            :content="$t('index_banner_commingSoon')"
            placement="top">
            <div :key="key"
              class="menu-item border border-gray-200 py-1.5 px-3 flex items-center bg-gray-100">
              <div class="w-4 h-4 -mt-0.5">
                <svg-icon className="block text-base flex-shrink-0"
                  :iconName='item.icon'></svg-icon>
              </div>
              <span class="text-sm text-gray-1000 ml-1">{{$t(item.label)}}</span>
            </div>
          </el-tooltip>
        </template>
      </template>
    </div>

    <a href="https://twitter.com/intent/user?&region=follow&screen_name=samChan3890089"
      rel="nofollow"
      target="_blank"
      class="mt-3 lg:mt-0 flex-shrink-0 inline-flex items-center justify-center bg-white px-3 h-9 group rounded-md border border-gray-1600 hover:border-purple-1300 cursor-pointer">
      <span class="block w-4 h-4 -mt-0.5">
        <svg-icon className="text-xl"
          iconName='twitter_logo'></svg-icon>
      </span>
      <span class="text-sm text-gray-1000 ml-2 group-hover:text-purple-1300">{{$t('index_banner_followUsToolify')}}</span>
    </a>
  </div>
</template>

<script>
export default {
  name: 'IndexMenuList',
  data() {
    return {
      menus: [
        {
          label: 'index_today',
          path: '/',
          name: 'index',
          icon: 'today',
        },
        {
          label: 'index_banner_new',
          path: '/new',
          name: 'new',
          icon: 'new',
        },
        {
          label: 'index_banner_mostSaved',
          path: '/most-saved',
          name: 'most-saved',
          icon: 'saved',
        },
        {
          label: 'index_banner_mostUsed',
          path: '/most-used',
          name: 'most-used',
          icon: 'used',
        },
        {
          label: 'index_banner_browser_extension',
          path: '/browser-extension',
          name: 'browser-extension',
          icon: 'chrome_2',
        },
        {
          label: 'index_banner_apps',
          path: '/apps',
          name: 'apps',
          icon: 'app-black',
        },
        {
          label: 'discord_discordOfAI',
          path: '/discord',
          name: 'discord',
          icon: 'discord_default',
        },
        {
          label: 'index_banner_aiForJobs',
          path: '/ai-for-jobs',
          name: 'ai-for-jobs',
          icon: 'ai2',
          isCommingSoon: true,
        },
        {
          label: 'index_banner_aiForCapabilities',
          path: '/ai-for-capabilities',
          name: 'ai-for-capabilities',
          icon: 'capabilities',
          isCommingSoon: true,
        },
      ],
    }
  },
}
</script>
<style lang='scss' scoped>
.index-menu-list {
  .menu-item {
    border-radius: 21px;
    &.actived {
      svg {
        fill: #fff;
      }
    }
  }
  a {
    border-radius: 21px;
    svg {
      fill: #2d2d2d;
    }
    &:hover {
      svg {
        fill: #7150e6;
      }
    }
  }
}
</style>